<!--
* @Author: 张昊
* @Date:  2022-10-18 11:05:00
* @FilePath: /pages/mine/integrate/integrate.vue
* @Description: 我的积分
-->
<template>
	<view>
		<!-- 总积分数 -->
		<view class="u-flex u-row-center u-col-center signin" :style="[{ background: '#374486' }]">
			<view class="u-flexs u-m-b-50">
				<view class="u-flex u-row-center u-col-center garden1">
					<view class="garden2" :class="is_signin ? 'is-signin' : 'no-signin'"></view>
					<view class="u-flex u-row-center u-col-center garden3 u-font-30" :class="is_signin ? 'is-signin' : 'no-signin'" v-text="'积分数:' + score"></view>
				</view>
			</view>
		</view>
		<!-- 积分记录列表 -->
		<u-list>
			<u-list-item v-for="(item, index) in scoreList" :key="index">
				<u-cell :title="item.memo" :value="$u.timeFormat(item.createtime, 'yyyy年mm月dd日')"></u-cell>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
import { userIndex, scoreloglist } from '@/common/api.js';
export default {
	data() {
		return {
			// 积分数
			score: 0,
			// 积分记录
			scoreList: []
		};
	},
	async onShow() {
		let { score } = await userIndex();

		let { data } = await scoreloglist({
			page: 1,
			limit: 10
		});

		this.scoreList = data;
		this.score = score;
	}
};
</script>

<style lang="scss">
.signin {
	height: 450rpx;
	position: relative;
	.u-flexs {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.garden1 {
		width: 180rpx;
		height: 180rpx;
		border-radius: 200rpx;
		background-color: rgba(255, 255, 255, 0.4);
		position: relative;
		.garden2 {
			width: 150rpx;
			height: 150rpx;
			border-radius: 200rpx;
			background-color: rgba(255, 255, 255, 0.7);
			position: absolute;
			left: 15rpx;
			top: 15rpx;
			z-index: 80;
			.is-signin {
				color: #909399;
			}
			&.no-signin {
				animation: gardens2 2s infinite;
			}
		}
		.garden3 {
			width: 120rpx;
			height: 120rpx;
			border-radius: 200rpx;
			background-color: #ffffff;
			position: relative;
			z-index: 100;
			&.no-signin {
				animation: gardens3 2s infinite;
			}
		}
	}
	.u-score-color {
		color: #e0e0e0;
	}
	.rule {
		position: absolute;
		right: 0;
		top: 50rpx;
		background-color: rgba(255, 255, 255, 0.9);
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		padding: 5rpx 10rpx 5rpx 20rpx;
	}
}
.number {
	position: relative;
	top: -65rpx;
	.u-col-center {
		height: 130rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 5px 0px rgba(0, 34, 144, 0.1);
		.u-row-around {
			width: 100%;
		}
	}
}

@keyframes gardens2 {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.5);
	}
}
</style>
